//确认订单
import { View, Text,Image,Button } from '@tarojs/components'
import {useState,useEffect} from 'react'
import { AtIcon,AtList, AtListItem,AtModal, AtModalHeader, AtModalContent, AtModalAction,AtRadio,AtToast   } from 'taro-ui'
import Taro from '@tarojs/taro'
import './confirmOrder.less'
const ConfirmOrder=()=>{
    const [isOpened,setOpen]=useState(false)
    const selectApply=()=>{
        setOpen(true)
        setTishi(false)
    }
    const [applyVal,setApply]=useState('')
    const setval=(value)=>{
        setApply(value);
    }
    const [tishi,setTishi]=useState(false)
    const fukuan=()=>{
        setTishi(true)
        setOpen(false)
        setTimeout(()=>{
            Taro.redirectTo({
                url:'/pages/my/myOrder/myOrder'
            })
        },3000)
    }
    const fanhui=()=>{
        setOpen(false)
    }
    const [ww,setWw]=useState(20)
    //跳转到地址列表
    const tzdizhi=()=>{
        Taro.navigateTo({
            url:'/pages/address/address'
        })
    }
    return(
        <View className='orderbox'> 
            <View style={{fontSize:'30px',fontWeight:'bold',marginBottom:'20px'}}>确认订单</View>
            <AtList>
                <AtListItem
                    title={'张三'+'18322206549'}
                    note={'国家西部信息产业基地'}
                    arrow='right'
                    iconInfo={{size: 30, color: '#78A4FA', value: 'map-pin'}}
                    onClick={tzdizhi}
                />
            </AtList>
            <AtList>
                <AtListItem
                    title={'真空秋裤'}
                    note={'黑色'+'X'+'1'}
                    arrow='right'
                    iconInfo={{size: 30, color: '#78A4FA', value: 'shopping-cart'}}
                />
            </AtList>
            <AtList>
                <AtListItem
                    title={'￥'+ww}
                    note={'快递费'+ww+'元'}
                    iconInfo={{size: 30, color: '#78A4FA', value: 'money'}}
                />
            </AtList>
            <view className='addDZ' onClick={selectApply}>选择支付方式</view>
            <AtModal isOpened={isOpened}>
                <AtModalHeader><AtIcon value='chevron-left' size='20' color='#000' onClick={fanhui}></AtIcon>付款方式</AtModalHeader>
                <AtModalContent>
                <AtRadio
                    options={[
                    { label: '支付宝', value: '支付宝'},
                    { label: '微信', value: '微信' },
                    ]}
                    value={applyVal}
                    onClick={setval}
                />
                </AtModalContent>
                <AtModalAction><Button onClick={fukuan} style={{background:'rgb(255,60,80)',color:'white',margin:'10px 5px'}}>立即支付</Button> </AtModalAction>
          </AtModal>
          <AtToast isOpened={tishi} text="支付成功" status='success'></AtToast>
        </View>
    )
}
export default ConfirmOrder;